import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Form, InputNumber, Input } from 'antd'
import _ from 'loadsh'
import { Line, Cell, Split } from '@components/ApprovePre/Approve'
import style from './SecretaryInput.module.less'

const { Item } = Form
const layout = { labelCol: { flex: '96px' } }
export default class SecretaryInput extends Component {
  state = {
    keyTitleMap: {},
    feeAcceptanceDerate: 0,
    feeProcessingDerate: 0
  }

  initKeyTitleMap () {
    const map = {}
    const list = _.get(this.props.instance || {}, 'currentStep.vars', [])
    list.forEach(li => {
      map[li.key] = li.title
    })
    this.setState({
      keyTitleMap: map
    })
  }

  // 修改受理费
  changeAcceptance (v) {
    this.setState({
      feeAcceptanceDerate: v
    })
    this.props.formRef.current.setFieldsValue({
      fee_acceptance_derate: v
    })
  }

  // 修改处理费
  changeProcessing (v) {
    this.setState({
      feeProcessingDerate: v
    })
    this.props.formRef.current.setFieldsValue({
      fee_processing_derate: v
    })
  }

  getFeeAfterDerate () {
    const claim = this.props.caseDetail.claim || {}
    const fee = claim.fee - this.state.feeAcceptanceDerate - this.state.feeProcessingDerate
    return `${fee}元`
  }

  getAcceptanceAfterDerate () {
    const claim = this.props.caseDetail.claim || { fee_acceptance: 0 }
    const fee = claim.fee_acceptance - this.state.feeAcceptanceDerate
    return `${fee}元`
  }

  getProcessingAgterDerate () {
    const claim = this.props.caseDetail.claim || { fee_processing_derate: 0 }
    const fee = claim.fee_processing - this.state.feeProcessingDerate
    return `${fee}元`
  }

  componentDidUpdate (prev) {
    if (this.props.instance !== prev.instance) {
      this.initKeyTitleMap()
    }
  }

  componentDidMount () {
    this.initKeyTitleMap()
  }

  render () {
    const { keyTitleMap } = this.state
    return (
      <div>
        <Line>
          <Cell>
            <Item {...layout} label='发起秘书'>
              <span>{this.props.userInfo.realname}</span>
            </Item>
          </Cell>
          <Split />
          <Cell>
            <Item name={['vars', 'claimid']} noStyle><span /></Item>
            <Item {...layout} name={['vars', 'fee_acceptance_derate']} label={keyTitleMap.fee_acceptance_derate} rules={[{ required: true, message: `${keyTitleMap.fee_acceptance_derate}不能为空` }]}>
              <MoneyInput placeholder={`${keyTitleMap.fee_acceptance_derate}不能为空`} onChange={e => this.changeAcceptance(e)} />
            </Item>
          </Cell>
          <Split />
          <Cell>
            <Item {...layout} name={['vars', 'fee_processing_derate']} label={keyTitleMap.fee_processing_derate} rules={[{ required: true, message: `${keyTitleMap.fee_acceptance_derate}不能为空` }]}>
              <MoneyInput placeholder={`${keyTitleMap.fee_processing_derate}不能为空`} onChange={e => this.changeProcessing(e)} />
            </Item>
          </Cell>
        </Line>
        <Line>
          <Cell>
            <Item {...layout} label='减免后仲裁费'>
              <span>{this.getFeeAfterDerate()}</span>
            </Item>
          </Cell>
          <Split />
          <Cell>
            <Item {...layout} label='减免后受理费'>
              <span>{this.getAcceptanceAfterDerate()}</span>
            </Item>
          </Cell>
          <Split />
          <Cell>
            <Item {...layout} label='减免后处理费'>
              <span>{this.getProcessingAgterDerate()}</span>
            </Item>
          </Cell>
        </Line>
        <Line>
          <Cell style={{ width: '100%' }}>
            <Item {...layout} name={['vars', 'jianmian_remark']} label={keyTitleMap.jianmian_remark}>
              <Input placeholder={`请输入${keyTitleMap.jianmian_remark}`} />
            </Item>
          </Cell>
        </Line>
      </div>
    )
  }
}

SecretaryInput.proptypes = {
  caseDetail: PropTypes.object,
  userInfo: PropTypes.object,
  instance: PropTypes.object,
  formRef: PropTypes.object
}

SecretaryInput.defaultProps = {
  caseDetail: {},
  userInfo: {},
  instance: {},
  formRef: {}
}

class MoneyInput extends React.Component {
  render () {
    return (
      <div className={style['delay-day']}>
        <InputNumber value={this.props.value} className={style['delay-day-input']} placeholder={this.props.placeholder} onChange={d => this.props.onChange(d)} />
        <span className={style.unit}>元</span>
      </div>
    )
  }
}
